<template>
    <!-- 账户安全侧栏组件 -->
    <div>
        <div class="accountNav">
            <div class="accountInfo">
                <div class="accountHead" @click.stop="uploadHeadImg">
                    <el-avatar :size="95" >
                        <img :src="userImg" alt="">
                    </el-avatar>
                    <div class="changeImg">修改头像</div>
                </div>
                <span class="accountName">{{userInfo.username}}</span>
                <!-- 上传头像 -->
                <input type="file" accept="image/*" @change="handleFile" class="hiddenInput">
            </div>
            <div class="accountManagement">
                <div class="title">账号管理</div>
                <ul>
                    <li v-for="item in navList" :key="item.id" 
                        :class="[activeId === item.id ? 'active': '', 'navItem']"
                        @click="changeActive(item.id)">
                        <i :class="item.icon"></i>
                        <span> {{item.title}}</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
    props:{
        activeId: Number
    },
    computed:{
        ...mapState({
            userInfo: state => state.user.userInfo
        })
    },
    data(){
        return{
            userImg: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
            // 图片服务器地址
            imgBaseUrl: 'https://phone-shop.oss-cn-beijing.aliyuncs.com/',
            // nav列表
            navList: [
                {
                    id: 0,
                    title: '基本信息',
                    icon: 'el-icon-user'
                },
                {
                    id: 1,
                    title: '收货地址',
                    icon: 'el-icon-location-information'
                },
                {
                    id: 2,
                    title: '安全设置',
                    icon: 'el-icon-setting'
                },
                {
                    id: 3,
                    title: '我的订单',
                    icon: 'el-icon-shopping-cart-2'
                }
            ]
        }
    },
    methods:{
        // 修改侧栏，并跳转页面
        changeActive(id){
            switch(id){
                case 0:
                    this.$router.push('/userDetail')
                    break
                case 1:
                    this.$router.push('/userAddress')
                    break
                case 2:
                    this.$router.push('/userSecure')
                    break
                case 3:
                    this.$router.push('/userOrder')
                    break

            }
        },
        // 打开图片上传
        uploadHeadImg(){
            document.querySelector('.hiddenInput').click()
        },
        // 将头像显示
        async handleFile(e){
            let $target = e.target || e.srcElement
            let file = $target.files[0]
            var reader = new FileReader()
            reader.onload = (data) => {
                let res = data.target || data.srcElement
                this.userImg = res.result
            }
            reader.readAsDataURL(file)


            console.log(typeof file)
            // 上传头像
            const formData = new FormData()
            formData.set('file', file)
            const { data: res } = await this.$http.post('/user/image/send', formData, { headers: { 'Content-type': 'multipart/form-data' } })
            console.log('上传头像:', res)
            if(res.code === 200){
                this.$message.success('上传头像成功！')
            }

        },
        // 获取用户信息
        async getUserInfo(){
            const {data:res} = await this.$http.get('/user/info')
            console.log('用户信息：', res)
            if(res.code == 200){
                this.$store.commit('setUserInfo', res.data)
                this.userImg = 'https://phone-shop.oss-cn-beijing.aliyuncs.com/' + res.data.headUrl
            }
        }
    },
    created(){
        if(this.userInfo){
            if(this.userInfo.headUrl){
               this.userImg = 'https://phone-shop.oss-cn-beijing.aliyuncs.com/' + this.userInfo.headUrl
            }
        }else{
            this.getUserInfo()
        }
        // console.log('头像地址：', this.userImg)
    }
}
</script>

<style lang="scss" scoped>
.accountNav{
    height: 450px;
    box-shadow: 1px 1px 6px rgba(0,0,0, 0.1);
    .accountInfo{
        padding: 30px 0 0 10px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        .hiddenInput{
            display: none;
        }
        .accountHead{
            overflow: hidden;
            position: relative;
            border-radius: 50%;
            .changeImg{
                cursor: pointer;
                position: absolute;
                top: 40px;
                left: 0px;
                text-align: center;
                color: #fff;
                width: 95px;
                height: 23px;
                line-height: 23px;
                background: rgba(76,172,255,0.6);
            }
        }
        .accountName{
            color: #05101A;
            font-size: 24px;
            height: 36px;
        }
    }
    .accountManagement{
        .title{
            color: #05101A;
            font-size: 16px;
            font-weight: 400;
            padding: 10px 28px;
            margin-top: 6px;
        }
        ul{padding:0;}
        .navItem{
            list-style: none;
            font-size: 14px;
            padding: 6px 0px;
            padding-left: 30px;
            border-left: 2px solid #fff;
            cursor: pointer;
            color: #4D4D4D;
        }
        .active{
            border-left: 2px solid #4CACFF;
            background: #E6F3FF;
            i{
                color: #4CACFF;
            }
        }
    }
}


// 头像样式
.el-avatar{
    border: 1px solid rgb(243, 219, 190);
    background-color: rgb(252, 251, 249);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 5px;
    position: relative;
    img{
        border-radius: 50%;
        width: 90%;
        height: 90%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        background-color: #fff;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
}
</style>